<template>
    <view class="header">
		<view @click="back" class="back">
			<image src="../../static/talkBack.png" mode="widthFix"></image>
		</view>
		<view class="user">
			<view class="left">
				<image :src="ta_av" mode="aspectFill"></image>
			</view>
			<view class="right">
				<view class="username">{{ ta.username }}</view>
				<view class="status">Online</view>
			</view>
			<view class="call">
				<image src="../../static/Voice_Call.png" mode="widthFix"></image>
				<image src="../../static/Video_Call.png" mode="widthFix"></image>
			</view>
		</view>
    </view>
	
	<template v-for="(item, index) in arr" :key="index">
		<view class="ta" v-if="item.data === 1">
			<view class="left">
				<image :src="ta_av" mode="aspectFill"></image>
			</view>
			<view class="right">
				{{ item.message }}
			</view>
		</view>
		<view class="you" v-if="item.data === 0">
			<view class="left">
				{{ item.message }}
			</view>
			<view class="right">
				<image :src="my_av" mode="aspectFill"></image>
			</view>
		</view>
	</template>
	
	<input class="cendkey" type="text" v-model="inputValue" @confirm="enter"
	placeholder="Type a message" placeholder-style="color: white;" />
	<image class="Vector" src="../../static/Vector.png" mode="widthFix"></image>
	<image class="Vol" src="../../static/Group_30.png" mode="widthFix"></image>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const ta = uni.getStorageSync('talking')
const arr = ref(uni.getStorageSync('talkingMessage' + ta.x))
const inputValue = ref('')
const ta_av = ref(ta.avatar)
const my_av = ref(uni.getStorageSync('avatar'))
const id = uni.getStorageSync('userId')
const bid = ref(ta.x)

const db = uniCloud.database()
const getData = () => {
	db.collection('user').doc(id).get().then(res => {
		console.log(res.result.data);
		my_av.value = res.result.data[0].avatar
		console.log(bid.value);
		db.collection('talking')
			.where(`(aid == '${id}' && bid == '${bid.value}') || (bid == '${id}' && aid == '${bid.value}')`)
			.orderBy('time', 'asc')
			.get().then(res => {
				console.log(res.result.data);
				const list = res.result.data.map(a => {
					return {
						data: a.aid == id ? 0 : 1,
						message: a.content
					}
				})
				console.log(list);
				arr.value = list
				uni.setStorageSync('talkingMessage' + ta.x, list)
			}).catch(err => {
				console.log(err.message);
			})
	}).catch(err => {
		console.log(err.message);
	})
}
getData()

const enter = () => {
	if (inputValue.value.trim() === '') return  
	db.collection('talking').add({
		aid: id,
		bid: bid.value,
		content: inputValue.value,
		time: Date.now()
	})
	inputValue.value = ''
	getData()
}

const back = () => {
	uni.navigateBack()
}

</script>

<style lang="scss" scoped>
.header {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 50rpx 30rpx;
	
	.back {
		image {
			width: 92rpx;
		}
	}
	.user {
		display: flex;
		justify-content: center;
		align-items: center;
		.left {
			margin: 0 30rpx;
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 100rpx;
			}
		}
		.right {
			.username {
				font-size: 36rpx;
				font-weight: 600;
			}
			.status {
				font-size: 30rpx;
				color: green;
				font-weight: 600;
			}
		}
	}
	.call {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 90rpx;
		image {
			margin: 20rpx;
			width: 35rpx;
		}
	}
}

.ta {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin: 50rpx 0rpx;
	.left {
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 75rpx;
		}
	}
	.right {
		width: 508rpx;
		padding: 30rpx 30rpx;
		margin: 0 30rpx;
		background-color: #F4F4F4;
		border-radius: 40rpx 40rpx 40rpx 0;
	}
}

.you {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin: 50rpx 0rpx;
	.left {
		width: 508rpx;
		padding: 30rpx 30rpx;
		margin: 0 30rpx;
		background-color: #F4F4F4;
		border-radius: 40rpx 40rpx 0 40rpx;
	}
	.right {
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 75rpx;
		}
	}
}

.cendkey {
	background-color: #128C7E;
	height: 64rpx;
	width: 570rpx;
	color: white;
	border-radius: 50rpx;
	position: fixed;
	bottom: 30rpx;
	left: 45rpx;
	padding: 20rpx 40rpx;
}
.Vector {
	width: 47rpx;
	position: fixed;
	bottom: 60rpx;
	right: 160rpx;
}
.Vol {
	width: 28rpx;
	position: fixed;
	bottom: 60rpx;
	right: 95rpx;
}
</style>
